<template>
  <div class="container">
    <div class="int">
      <h3>商品介绍</h3>
      <div class="content">
        <el-form
          :model="ruleFormInt"
          :rules="rulesInt"
          ref="ruleFormInt"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item v-if="!flag" label="商品ID" prop="goodsSn">
            <el-input v-model="ruleFormInt.id" disabled> </el-input>
          </el-form-item>
          <el-form-item label="商品编号" prop="goodsSn">
            <el-input v-model="ruleFormInt.goodsSn"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="ruleFormInt.name"></el-input>
          </el-form-item>
          <el-form-item label="市场售价" prop="">
            <el-input placeholder="0.00" v-model="ruleFormInt.counterPrice">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="是否新品" prop="">
            <el-radio v-model="ruleFormInt.isNew" :label="true">新品</el-radio>
            <el-radio v-model="ruleFormInt.isNew" :label="false"
              >非卖品</el-radio
            >
          </el-form-item>
          <el-form-item label="是否热卖" prop="">
            <el-radio v-model="ruleFormInt.isHot" :label="true">热卖</el-radio>
            <el-radio v-model="ruleFormInt.isHot" :label="false">普通</el-radio>
          </el-form-item>
          <el-form-item label="是否在售" prop="">
            <el-radio v-model="ruleFormInt.isOnSale" :label="true"
              >在售</el-radio
            >
            <el-radio v-model="ruleFormInt.isOnSale" :label="false"
              >未售</el-radio
            >
          </el-form-item>
          <el-form-item label="商品图片" prop="">
            <el-upload
              class="avatar-uploader"
              action="api/admin/storage/create"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="ruleFormInt.picUrl"
                :src="ruleFormInt.picUrl"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- <el-input v-model="ruleFormInt.picUrl"></el-input> -->
          </el-form-item>
          <el-form-item label="宣传画廊" prop="">
            <el-upload
              action="api/admin/storage/create"
              list-type="picture-card"
              :on-success="handleAvatarSuccessInt"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="ruleFormInt.gallery" alt="" />
            </el-dialog>
            <!-- <el-input v-model="ruleFormInt.gallery"></el-input> -->
          </el-form-item>
          <el-form-item label="商品单位" prop="">
            <el-input
              v-model="ruleFormInt.unit"
              placeholder="件/个/盒"
            ></el-input>
          </el-form-item>
          <el-form-item label="关键字" prop="">
            <el-tag
              :key="index"
              v-for="(tag, index) in ruleFormInt.keywords"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+ 增加</el-button
            >
            <!-- <el-input v-model="ruleFormInt.keywords"></el-input> -->
          </el-form-item>
          <el-form-item label="所属分类" prop="">
            <el-cascader
              v-model="ruleFormInt.categoryId"
              :options="categoryList"
              :props="{ expandTrigger: 'hover' }"
              placeholder="请选择"
            ></el-cascader>
            <!-- <el-input v-model="ruleFormInt.categoryId"></el-input> -->
          </el-form-item>
          <el-form-item label="所属品牌商" prop="">
            <el-cascader
              placeholder="请选择"
              v-model="ruleFormInt.brandId"
              :options="brandList"
              :props="{ expandTrigger: 'hover' }"
            ></el-cascader>
            <!-- <el-input v-model="ruleFormInt.brandId"></el-input> -->
          </el-form-item>
          <el-form-item label="商品简介" prop="">
            <el-input v-model="ruleFormInt.brief"></el-input>
          </el-form-item>
          <el-form-item label="商品详细介绍" prop="">
            <div class="tinymce-editor">
              <!-- <editor v-model="myValue" :init="editorInit" /> -->
              <editor
                v-model="myValue"
                :init="init"
                :disabled="disabled"
                @onClick="onClick"
              >
              </editor>
            </div>
            <!-- <el-input v-model="ruleFormInt.detail"></el-input> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 正常添加时的显示 -->
    <div class="size" v-if="flag">
      <div class="title">
        <h3>商品规格</h3>
        <div>
          <el-button
            type="primary"
            v-if="tabPosition == '2'"
            @click="dialogVisibleSize = true"
            >添加</el-button
          >
        </div>
      </div>

      <div class="content">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
          <el-radio-button label="1">
            <span @click="defaultSize">默认标准规格</span></el-radio-button
          >
          <el-radio-button label="2">多规格支持</el-radio-button>
        </el-radio-group>
        <div v-show="tabPosition == '1'">
          <el-table :data="tableSize" style="width: 100%">
            <el-table-column prop="specification" label="规格名" width="180">
            </el-table-column>
            <el-table-column prop="value" label="规格值" width="180">
            </el-table-column>
            <el-table-column prop="picUrl" label="规格图片">
              <template slot-scope="scope">
                <img :src="scope.row.picUrl" width="30px" alt="" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="tabPosition == '2'">
          <el-table :data="tableSize" style="width: 100%">
            <el-table-column prop="specification" label="规格名" width="180">
            </el-table-column>
            <el-table-column prop="value" label="规格值" width="180">
            </el-table-column>
            <el-table-column prop="picUrl" label="规格图片">
              <template slot-scope="scope">
                <img :src="scope.row.picUrl" width="30px" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="picUrl" label="操作">
              <template slot-scope="scope">
                <el-button type="danger" @click="deleteSize(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          title="设置规格"
          :visible.sync="dialogVisibleSize"
          width="30%"
        >
          <el-form ref="formSize" :model="formSize" label-width="80px">
            <el-form-item label="规格名">
              <el-input v-model="formSize.specification"></el-input>
            </el-form-item>
            <el-form-item label="规格值">
              <el-input v-model="formSize.value"></el-input>
            </el-form-item>
            <el-form-item label="规格图片">
              <el-upload
                class="avatar-uploader"
                action="api/admin/storage/create"
                :show-file-list="false"
                :on-success="handleAvatarSuccessSize"
                :before-upload="beforeAvatarUploadSize"
              >
                <img
                  v-if="formSize.picUrl"
                  :src="formSize.picUrl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!-- <el-input v-model="formSize.picUrl"></el-input> -->
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleSize = false">取 消</el-button>
            <el-button type="primary" @click="addTableSize">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="size" v-if="!flag">
      <div class="title">
        <h3>商品规格</h3>
      </div>
      <el-table :data="tableSize" style="width: 100%">
        <el-table-column prop="specification" label="规格名" width="180">
        </el-table-column>
        <el-table-column prop="value" label="规格值" width="180">
        </el-table-column>
        <el-table-column prop="picUrl" label="规格图片">
          <template slot-scope="scope">
            <img :src="scope.row.picUrl" width="30px" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="picUrl" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="setting(scope.$index, scope.row)"
              >设置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="设置规格" :visible.sync="setting1" width="50%">
        <el-form ref="forming" :model="forming" label-width="80px">
          <el-form-item label="规格名">
            <el-input
              v-model="forming.specification"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="规格值">
            <el-input
              v-model="forming.value"
              disabled
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="规格图片">
            <el-upload
              class="avatar-uploader"
              action="/api/admin/storage/create"
              :show-file-list="false"
              :on-success="handleAvatarSuccessing"
            >
              <img v-if="imageUrling" :src="imageUrling" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setting1 = false">取 消</el-button>
          <el-button type="primary" @click="settingok">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="save">
      <h3>商品库存</h3>
      <div class="content">
        <el-table :data="tableSave" style="width: 100%">
          <el-table-column prop="specifications" label="货品规格" width="180">
            <template slot-scope="scope">
              <el-tag
                size="mini"
                v-for="(item, index) in scope.row.specifications"
                :key="index"
                >{{ item }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="price" label="货品售价" width="180">
          </el-table-column>
          <el-table-column prop="number" label="货品数量"> </el-table-column>
          <el-table-column prop="url" label="货品图片">
            <template slot-scope="scope">
              <img width="30px" :src="scope.row.url" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template slot-scope="">
              <el-button type="primary" @click="setDialogSave()"
                >设置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="添加货品"
          :visible.sync="dialogVisibleSave"
          width="30%"
        >
          <el-form ref="formSave" :model="formSave" label-width="120px">
            <el-form-item label="货品规格列">
              <el-tag
                size="mini"
                v-for="(item, index) in formSave.specifications"
                :key="index"
                >{{ item }}</el-tag
              >
            </el-form-item>
            <el-form-item label="货品售价">
              <el-input v-model="formSave.price"></el-input>
            </el-form-item>
            <el-form-item label="货品数量">
              <el-input v-model="formSave.number"></el-input>
            </el-form-item>
            <el-form-item label="货品图片">
              <el-upload
                class="avatar-uploader"
                action="api/admin/storage/create"
                :show-file-list="false"
                :on-success="handleAvatarSuccessSave"
                :before-upload="beforeAvatarUploadSave"
              >
                <img v-if="formSave.url" :src="formSave.url" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!-- <el-input v-model="formSave.url"></el-input> -->
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleSave = false">取 消</el-button>
            <el-button type="primary" @click="saveTrue">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <div class="num">
      <h3>商品参数</h3>
      <div>
        <el-button type="primary" @click="addNum()">添加</el-button>
      </div>
      <el-table :data="tableNum" style="width: 100%">
        <el-table-column prop="attribute" label="商品参数名称" width="">
        </el-table-column>
        <el-table-column prop="value" label="商品参数值" width="">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="!flag"
              type="primary"
              @click="setbot(scope.$index, scope.row)"
              >设置</el-button
            >
            <el-button
              v-if="flag"
              type="danger"
              @click="deleteNum(scope.$index)"
              >删除</el-button
            >
            <el-button
              v-if="!flag"
              type="danger"
              @click="deleteNumuns(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 参数设置弹框 -->
      <el-dialog title="设置规格" :visible.sync="setting2" width="50%">
        <el-form ref="forming" :model="forming" label-width="80px">
          <el-form-item label="商品参数名称">
            <el-input
              v-model="forming.attribute"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品参数值">
            <el-input v-model="forming.value" style="width: 300px"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="setting2 = false">取 消</el-button>
          <el-button type="primary" @click="settingok2">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="添加商品参数"
        :visible.sync="dialogVisibleNum"
        width="30%"
      >
        <el-form ref="formNum" :model="formNum" label-width="120px">
          <el-form-item label="商品参数名称">
            <el-input v-model="formNum.attribute"></el-input>
          </el-form-item>
          <el-form-item label="商品参数值">
            <el-input v-model="formNum.value"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleNum = false">取 消</el-button>
          <el-button type="primary" @click="numTrue">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="btns">
      <el-button v-if="flag">取消</el-button>
      <el-button v-if="!flag" @click="gofu">取消</el-button>
      <el-button v-if="flag" type="primary" @click="upData">上架</el-button>
      <el-button v-if="!flag" type="primary" @click="refreshdata"
        >更新商品</el-button
      >
    </div>
  </div>
</template>

<script>
// 引入ediutor
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver";
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import "tinymce/plugins/image"; // 插入上传图片插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/table"; // 插入表格插件
import "tinymce/plugins/lists"; // 列表插件
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/icons/default";
import {
  merchandiseShelf_getList,
  merchandiseShelf_updata,
  compile,
  update,
} from "../../api/product.js";
export default {
  components: {
    Editor,
  },
  props: {
    value: {
      type: String,
      default: "",
    }, // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式， // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default: "lists image media table wordcount",
    },
    toolbar: {
      type: [String, Array],
      default:
        "undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat",
    },
  },
  data() {
    return {
      // 富文本
      init: {
        // language_url: `${this.baseUrl}/tinymce/langs/zh_CN.js`,
        language: "zh_CN",
        skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide`,
        content_css: `${this.baseUrl}/tinymce/skins/content/default/content.css`, // skin_url: `${this.baseUrl}/tinymce/skins/ui/oxide-dark`, // 暗色系 // content_css: `${this.baseUrl}/tinymce/skins/content/dark/content.css`, // 暗色系
        height: 600,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: true,
        menubar: true, // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片， // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        images_upload_handler: (blobInfo, success, failure) => {
          const img = "data:image/jpeg;base64," + blobInfo.base64();
          success(img);
        },
      },
      myValue: this.value,

      tableNumbf: [],
      setindex: 0,
      imageUrling: "",
      flag: true,
      setting1: false,
      forming: {
        specification: "",
        value: "",
        attribute: "",
      },
      setting2: false,
      // attributes: [{ attribute: "dfas", value: "32" }],
      // goods: {
      //   picUrl:
      //     "http://admin.bsmall.byesame.com/wx/storage/fetch/uzwpyo24wzl20t9n47r0.jpg",
      // },
      // products: [
      //   { id: 0, specifications: ["标准"], price: 0, number: 0, url: "" },
      // ],
      // specifications: [{ specification: "规格", value: "标准", picUrl: "" }],
      //参数对话框控制
      dialogVisibleNum: false,
      //参数对话框表单
      formNum: {
        attribute: "",
        value: "",
      },
      //参数表格
      tableNum: [],
      //库存对话框表单
      formSave: {
        specifications: [],
        price: 0,
        number: 0,
        url: "",
      },
      //库存对话框控制
      dialogVisibleSave: false,
      //库存表格
      tableSave: [
        {
          id: 0,
          specifications: [],
          price: 0,
          number: 0,
          url: "",
        },
      ],
      //规格图片回显
      imageUrlSize: "",
      //规格表单
      formSize: {
        specification: "",
        value: "",
        picUrl: "",
      },
      //规格对话框控制
      dialogVisibleSize: false,
      //规格表
      tableSize: [
        {
          specification: "规格",
          value: "标准",
          picUrl: "",
        },
      ],
      //商品规格页面控制
      tabPosition: "1",
      //照片墙
      dialogImageUrl: "",
      dialogVisible: false,
      // 介绍选择列表
      brandList: [],
      categoryList: [],
      //关键字隐藏
      inputVisible: false,
      //  关键字存储
      inputValue: "",
      // 介绍表单加验证
      ruleFormInt: {
        brandId: "",
        brief: "",
        categoryId: "",
        counterPrice: "",
        detail: "",
        keywords: [],
        gallery: [],
        goodsSn: "",
        isHot: "",
        isNew: "",
        isOnSale: "",
        name: "",
        picUrl: "",
        unit: "",
      },
      rulesInt: {
        goodsSn: [
          { required: true, message: "请输入商品编号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    //参数确定
    numTrue() {
      this.tableNum.push(JSON.parse(JSON.stringify(this.formNum)));
      console.log(this.tableNum, "tablenum");
      this.dialogVisibleNum = false;
      this.formNum = {
        attribute: "",
        value: "",
      };
    },
    //删除参数
    deleteNum(index) {
      this.tableNum.splice(index, 1);
    },
    // 编辑的删除
    deleteNumuns(index, row) {
      console.log(row, 123123);
      console.log(this.tableNum);
      this.tableNum[index].deleted = true;
      this.tableNumbf = JSON.parse(JSON.stringify(this.tableNum));
      this.tableNum.splice(index, 1);
    },
    //添加参数
    addNum() {
      this.dialogVisibleNum = true;
    },
    //库存表单确定
    saveTrue() {
      this.tableSave[0] = {
        id: 0,
        ...this.formSave,
      };
      this.dialogVisibleSave = false;
    },
    //库存表单图片
    handleAvatarSuccessSave(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.formSave.url = res.data.url;
    },
    beforeAvatarUploadSave(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //设置库存表单
    setDialogSave() {
      this.dialogVisibleSave = true;
      this.formSave = this.tableSave[0];
    },
    //设置默认标准规格
    defaultSize() {
      this.tableSize = [
        {
          specification: "规格",
          value: "标准",
          picUrl: "",
        },
      ];
      // console.log(this.tableSize, "talbesize");
    },
    //往规格表格中添加表单对象
    addTableSize() {
      this.tableSize.push(this.formSize);
      this.dialogVisibleSize = false;
      this.formSize = {
        specification: "",
        value: "",
        picUrl: "",
      };
    },
    //添加图片规格
    handleAvatarSuccessSize(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res, "res");
      this.formSize.picUrl = res.data.url;
    },
    beforeAvatarUploadSize(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //删除规格
    deleteSize(index) {
      this.tableSize.splice(index, 1);
    },
    //上架
    upData() {
      // console.log(this.ruleFormInt, "ruleFormInt");
      this.ruleFormInt.categoryId = this.ruleFormInt.categoryId[1];
      this.ruleFormInt.brandId = this.ruleFormInt.brandId[0];
      this.ruleFormInt.keywords = this.ruleFormInt.keywords.join(",");
      let data = {
        attributes: this.tableNum,
        goods: this.ruleFormInt,
        products: this.tableSave,
        specifications: this.tableSize,
      };
      merchandiseShelf_updata(data).then((res) => {
        // console.log(res, "res");
        this.$notify({
          title: "成功",
          message: "商品上架成功",
          type: "success",
        });
        this.$router.push("/product/commoditylist");
      });
    },
    //上传成功回调
    handleAvatarSuccessInt(res, file) {
      console.log(res, "res");
      this.ruleFormInt.gallery.push(res.data.url);
      // console.log(this.ruleFormInt.gallery,'gallery')
    },
    //照片墙
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file, "file");

      this.dialogVisible = true;
    },
    //上传头像
    handleAvatarSuccess(res, file) {
      this.ruleFormInt.picUrl = res.data.url;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //关键字
    handleClose(tag) {
      this.ruleFormInt.keywords.splice(
        this.ruleFormInt.keywords.indexOf(tag),
        1
      );
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.ruleFormInt.keywords.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 编辑设置弹框
    setting(index, row) {
      this.setindex = index;
      this.setting1 = true;
      console.log(row, "row");
      this.imageUrling = row.picUrl; //图片
      this.forming.specification = row.specification; //规格
      this.forming.value = row.value; //规格值
    },
    // 编辑图片修改
    handleAvatarSuccessing(res) {
      console.log(res);
      this.imageUrling = res.data.url;
    },
    // 编辑确定
    settingok() {
      this.tableSize[this.setindex].picUrl = this.imageUrling;
      this.setting1 = false;
    },
    //参数确定按钮回写
    settingok2() {
      this.tableNum[this.setindex].attribute = this.forming.attribute;
      this.tableNum[this.setindex].value = this.forming.value;
      console.log(this.tableNum);
      this.setting2 = false;
    },
    //参数设置弹框
    setbot(index, row) {
      this.setindex = index;
      this.setting2 = true;
      console.log(index, row);
      this.forming.attribute = row.attribute;
      this.forming.value = row.value;
    },
    // 初始化介绍的选择列表
    getList() {
      merchandiseShelf_getList().then((res) => {
        // console.log(res, "res");
        this.brandList = res.data.brandList;
        this.categoryList = res.data.categoryList;
      });
    },
    // 编辑完成提交更新
    refreshdata() {
      this.ruleFormInt.detail = this.myValue;
      // this.ruleFormInt.categoryId = this.ruleFormInt.categoryId[1];
      // this.ruleFormInt.brandId = this.ruleFormInt.brandId[0];
      this.tableNum = this.tableNumbf;
      console;
      try {
        this.tableNum[0].updateTime = "";
      } catch (error) {}

      console.log(this.ruleFormInt.keywords, "keywords111111");
      this.ruleFormInt.keywords = this.ruleFormInt.keywords.join(",");
      console.log(this.ruleFormInt.keywords, "keywords2222222");
      console.log(this.ruleFormInt, "ruleFormInt");
      let data = {
        attributes: this.tableNum,
        goods: this.ruleFormInt,
        products: this.tableSave,
        specifications: this.tableSize,
      };
      update(data).then((res) => {
        if (res.errno == 0) {
          this.$notify({
            title: "成功",
            message: "数据更新成功",
            type: "success",
          });
          this.$router.push({
            path: "/product/commoditylist",
          });
        }
      });
    },
    // 取消
    gofu() {
      this.$router.go(-1);
    },
    // 编辑参数接收调用参数
    compilesun() {
      console.log(this.$route.query.id);
      compile({ id: this.$route.query.id }).then((res) => {
        console.log(res, "res");

        this.ruleFormInt = res.data.goods;
        this.myValue = res.data.goods.detail
        console.log(this.ruleFormInt, "ruleFormInt");
        // this.ruleFormInt.isNew = res.data.goods.isNew
        // this.ruleFormInt.isHot = res.data.goods.isHot
        // this.ruleFormInt.isOnSale = res.data.goods.isOnSale
        this.ruleFormInt.keywords = res.data.goods.keywords.split(",");
        console.log(this.ruleFormInt.keywords, "keywordsnnnnnnn");
        this.tableSave[0].specifications = res.data.specifications.map(
          (item) => item.specification
        );
        this.tableSave[0].price = res.data.products[0].price;
        this.tableSave[0].number = res.data.products[0].number;
        this.tableSave[0].url = res.data.products[0].url;
        this.tableNum = res.data.attributes;
        this.tableNumbf = res.data.attributes;
        this.tableSize = res.data.specifications;
        
        console.log(this.tableSize, "tableSize");
      });
    }, // 需要什么事件可以自己增加
    // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    }, // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.myValue = "";
    },
    openFun(row) {
      console.log(row);
    },
  },
  created() {
    this.getList();
    if (this.$route.query.id) {
      this.compilesun();
      this.flag = false;
    }
  },
  mounted() {
    tinymce.init({
      selector: "#textarea1", // change this value according to your HTML //启用菜单栏并显示如下项 [文件 编辑 插入 格式 表格]
      menubar: "file edit insert view format table", // 配置每个菜单栏的子菜单项（如下是默认配置）
      menu: {
        file: { title: "File", items: "newdocument" },
        edit: {
          title: "Edit",
          items: "undo redo | cut copy paste pastetext | selectall",
        },
        insert: { title: "Insert", items: "link media | template hr" },
        view: { title: "View", items: "visualaid" },
        format: {
          title: "Format",
          items:
            "bold italic underline strikethrough superscript subscript | formats | removeformat",
        },
        table: {
          title: "Table",
          items: "inserttable tableprops deletetable | cell row column",
        },
      },
    });
  },
  watch: {
    tableSize: {
      handler(newVal, oldVal) {
        console.log(newVal, "newVal");
        this.tableSave[0].specifications = [];
        for (let i = 0; i < newVal.length; i++) {
          this.tableSave[0].specifications.push(newVal[i].value);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
/* 上传头像 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 关键字 */
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.container {
  .int {
    box-shadow: -1px 0px 4px #8a8a8a;
    padding: 20px;
    margin-bottom: 20px;
  }
  .size {
    box-shadow: -1px 0px 4px #8a8a8a;
    padding: 20px;
    margin-bottom: 20px;
    .title {
      display: flex;
      flex-direction: row;
      h3 {
        margin-right: 500px;
      }
    }
  }
  .save {
    box-shadow: -1px 0px 4px #8a8a8a;
    padding: 20px;
    margin-bottom: 20px;
  }
  .num {
    box-shadow: -1px 0px 4px #8a8a8a;
    padding: 20px;
    margin-bottom: 20px;
  }
}
.btns {
  display: flex;
  justify-content: center;
}
</style>